<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单详情 - 邻里</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
            max-width: 500px;
            margin: 0 auto;
            padding: 0 10px 20px;
        }
        
        /* 顶部导航栏 */
        .header {
            background: linear-gradient(135deg, #4e54c8, #8f94fb);
            color: white;
            padding: 15px;
            border-radius: 0 0 15px 15px;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 4px 12px rgba(78, 84, 200, 0.2);
        }
        
        .header-title {
            font-size: 1.2rem;
            font-weight: 600;
        }
        
        .header-icon {
            color: white;
            font-size: 1.2rem;
            text-decoration: none;
        }
        
        /* 订单状态卡片 */
        .status-card {
            background-color: white;
            border-radius: 12px;
            padding: 18px;
            margin-bottom: 15px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            text-align: center;
        }
        
        .order-status {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 8px;
        }
        
        .status-completed {
            color: #27ae60; /* 已完成 - 绿色 */
        }
        
        .order-date {
            color: #888;
            font-size: 0.9rem;
        }
        
        /* 订单信息区域 */
        .order-info-section {
            background-color: white;
            border-radius: 12px;
            padding: 18px;
            margin-bottom: 15px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }
        
        .section-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 15px;
            color: #333;
            padding-bottom: 10px;
            border-bottom: 1px solid #f1f1f1;
        }
        
        /* 物品信息 */
        .item-info {
            display: flex;
            margin-bottom: 15px;
        }
        
        .item-image {
            width: 100px;
            height: 100px;
            background-color: #f8f9fa;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            font-size: 2rem;
            border-radius: 8px;
            flex-shrink: 0;
        }
        
        .item-details {
            flex: 1;
            margin-left: 15px;
        }
        
        .item-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 8px;
        }
        
        .item-meta {
            font-size: 0.9rem;
            color: #666;
            margin-bottom: 4px;
        }
        
        /* 信息列表 */
        .info-list {
            margin-bottom: 10px;
        }
        
        .info-row {
            display: flex;
            padding: 12px 0;
            border-bottom: 1px solid #f1f1f1;
        }
        
        .info-row:last-child {
            border-bottom: none;
        }
        
        .info-label {
            width: 90px;
            color: #888;
            font-size: 0.95rem;
        }
        
        .info-value {
            color: #333;
            font-size: 0.95rem;
            flex: 1;
        }
        
        /* 价格信息 */
        .price-info {
            background-color: #f9fafb;
            padding: 15px;
            border-radius: 8px;
            margin-top: 15px;
        }
        
        .price-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            font-size: 0.95rem;
        }
        
        .price-row.total {
            font-weight: 600;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px dashed #e1e1e1;
            color: #ff6b6b;
        }
        
        /* 时间线样式 */
        .timeline {
            position: relative;
            margin: 20px 0 10px 20px;
        }
        
        .timeline:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 2px;
            background-color: #e1e1e1;
        }
        
        .timeline-item {
            position: relative;
            padding-left: 25px;
            margin-bottom: 25px;
        }
        
        .timeline-item:last-child {
            margin-bottom: 0;
        }
        
        .timeline-dot {
            position: absolute;
            left: -23px;
            top: 0;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: #4e54c8;
            border: 3px solid white;
            box-shadow: 0 0 0 2px rgba(78, 84, 200, 0.1);
        }
        
        .timeline-dot.completed {
            background-color: #27ae60;
            box-shadow: 0 0 0 2px rgba(39, 174, 96, 0.1);
        }
        
        .timeline-content {
            background-color: white;
            padding: 12px 15px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        
        .timeline-title {
            font-weight: 500;
            margin-bottom: 3px;
        }
        
        .timeline-time {
            font-size: 0.85rem;
            color: #888;
        }
        
        /* 底部按钮 */
        .bottom-btn {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: white;
            padding: 12px;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            max-width: 500px;
            margin: 0 auto;
        }
        
        .back-btn {
            width: 100%;
            padding: 12px 0;
            border-radius: 10px;
            border: none;
            font-size: 0.95rem;
            font-weight: 500;
            cursor: pointer;
            background: linear-gradient(135deg, #4e54c8, #8f94fb);
            color: white;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="header">
        <a href="my_orders.html" class="header-icon"><i class="fas fa-arrow-left"></i></a>
        <div class="header-title">订单详情</div>
        <a href="#" class="header-icon"><i class="fas fa-share-alt"></i></a>
    </div>
    
    <!-- 订单状态卡片 -->
    <div class="status-card">
        <div class="order-status status-completed">已完成</div>
        <div class="order-date">订单编号: 20240822001 | 完成时间: 2024-08-22 16:45</div>
    </div>
    
    <!-- 物品信息 -->
    <div class="order-info-section">
        <div class="section-title">物品信息</div>
        <div class="item-info">
            <div class="item-image"><i class="fas fa-camera"></i></div>
            <div class="item-details">
                <div class="item-title">专业单反相机 佳能EOS R6 几乎全新</div>
                <div class="item-meta"><i class="fas fa-user"></i> 张邻居（3号楼）</div>
                <div class="item-meta"><i class="fas fa-map-marker-alt"></i> 存放位置：3号楼 1单元 502</div>
            </div>
        </div>
    </div>
    
    <!-- 订单信息 -->
    <div class="order-info-section">
        <div class="section-title">订单信息</div>
        <div class="info-list">
            <div class="info-row">
                <div class="info-label">借用时间</div>
                <div class="info-value">2024-08-20 至 2024-08-22</div>
            </div>
            <div class="info-row">
                <div class="info-label">借用天数</div>
                <div class="info-value">3天</div>
            </div>
            <div class="info-row">
                <div class="info-label">取货方式</div>
                <div class="info-value">当面取货</div>
            </div>
            <div class="info-row">
                <div class="info-label">联系电话</div>
                <div class="info-value">138****5678</div>
            </div>
            <div class="info-row">
                <div class="info-label">支付方式</div>
                <div class="info-value">微信支付</div>
            </div>
            <div class="info-row">
                <div class="info-label">支付时间</div>
                <div class="info-value">2024-08-19 09:32</div>
            </div>
        </div>
        
        <!-- 价格信息 -->
        <div class="price-info">
            <div class="price-row">
                <div>基础费用 (3天 × ¥50/天)</div>
                <div>¥150.00</div>
            </div>
            <div class="price-row">
                <div>平台服务费</div>
                <div>¥0.00</div>
            </div>
            <div class="price-row total">
                <div>实付款</div>
                <div>¥150.00</div>
            </div>
        </div>
    </div>
    
    <!-- 订单进度 -->
    <div class="order-info-section">
        <div class="section-title">订单进度</div>
        <div class="timeline">
            <div class="timeline-item">
                <div class="timeline-dot completed"></div>
                <div class="timeline-content">
                    <div class="timeline-title">订单完成，物品已归还</div>
                    <div class="timeline-time">2024-08-22 16:45</div>
                </div>
            </div>
            <div class="timeline-item">
                <div class="timeline-dot completed"></div>
                <div class="timeline-content">
                    <div class="timeline-title">物品已取走，开始借用</div>
                    <div class="timeline-time">2024-08-20 10:15</div>
                </div>
            </div>
            <div class="timeline-item">
                <div class="timeline-dot completed"></div>
                <div class="timeline-content">
                    <div class="timeline-title">订单已确认，等待取货</div>
                    <div class="timeline-time">2024-08-19 14:20</div>
                </div>
            </div>
            <div class="timeline-item">
                <div class="timeline-dot completed"></div>
                <div class="timeline-content">
                    <div class="timeline-title">支付成功</div>
                    <div class="timeline-time">2024-08-19 09:32</div>
                </div>
            </div>
            <div class="timeline-item">
                <div class="timeline-dot completed"></div>
                <div class="timeline-content">
                    <div class="timeline-title">订单创建成功</div>
                    <div class="timeline-time">2024-08-19 09:30</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部返回按钮 -->
    <div class="bottom-btn">
        <button class="back-btn" onclick="window.location.href='my_orders.html'">返回订单列表</button>
    </div>
</body>
</html>
    